<template>
  <div>
    <el-row>
      <el-collapse>
        <template v-for="(item, index) in data.layoutitemlist">
          <el-collapse-item
            :key="index"
            :title="'布局【' + item.name + '】'"
            :name="'layoutitem' + index"
          >
            <el-collapse class="tabchild">
              <template v-for="(plane, pindex) in item.widgetForm.list">
                <el-collapse-item
                  :key="index + '' + pindex"
                  v-if="plane && plane.type == 'gridPanel'"
                  :title="
                    '  模块【' +
                      (plane.title === '' || plane.title === undefined
                        ? plane.name
                        : plane.title) +
                      '】'
                  "
                  :name="plane.key"
                >
                  <template v-for="(element, eindex) in plane.columns[0].list">
                    <a-tag
                      color="pink"
                      @click="selectControl(element)"
                      :key="index + '' + pindex + '' + eindex"
                      v-if="notcontroltype.indexOf(element.type) < 0"
                    >
                      {{ element.title }}
                    </a-tag>
                    <template v-if="element.type === 'partlayout'">
                      <a-tag
                        color="pink"
                        v-for="(eitem, eitemindex) in element.list"
                        @click="selectControl(eitem)"
                        :key="
                          index +
                            '' +
                            pindex +
                            '' +
                            tindex +
                            '' +
                            eindex +
                            '' +
                            eitemindex
                        "
                      >
                        {{ eitem.title }}
                      </a-tag>
                    </template>
                  </template>
                </el-collapse-item>
                <el-collapse-item
                  v-else-if="plane && plane.type == 'tabs'"
                  :title="'模块【' + plane.name + '】'"
                  :key="index + '' + pindex"
                >
                  <el-collapse class="tabchild2">
                    <template v-for="(tab, tindex) in plane.options.panelist">
                      <el-collapse-item
                        :title="'子模块【' + tab.title + '】'"
                        :name="tab.key"
                        :key="index + '' + pindex + '' + tindex"
                      >
                        <template
                          v-for="(element, eindex) in tab.columns[0].list"
                        >
                          <a-tag
                            color="pink"
                            @click="selectControl(element)"
                            v-if="notcontroltype.indexOf(element.type) < 0"
                            :key="
                              index + '' + pindex + '' + tindex + '' + eindex
                            "
                          >
                            {{ element.title }}
                          </a-tag>
                          <template v-if="element.type === 'partlayout'">
                            <a-tag
                              color="pink"
                              v-for="(eitem, eitemindex) in element.list"
                              @click="selectControl(eitem)"
                              :key="
                                index +
                                  '' +
                                  pindex +
                                  '' +
                                  tindex +
                                  '' +
                                  eindex +
                                  '' +
                                  eitemindex
                              "
                            >
                              {{ eitem.title }}
                            </a-tag>
                          </template>
                        </template>
                      </el-collapse-item>
                    </template>
                  </el-collapse>
                </el-collapse-item>
                <el-collapse-item
                  v-else
                  :key="pindex"
                  :title="'模块【' + plane.name + '】'"
                >
                  <el-collapse class="tabchild2">
                    <template v-for="(tab, tindex) in plane.options.panelist">
                      <el-collapse-item
                        :title="'子模块【' + tab.title + '】'"
                        :name="tab.key"
                        :key="index + '' + pindex + '' + tindex"
                      >
                        <template
                          v-for="(element, eindex) in tab.columns[0].list"
                        >
                          <a-tag
                            color="pink"
                            @click="selectControl(element)"
                            v-if="notcontroltype.indexOf(element.type) < 0"
                            :key="
                              index + '' + pindex + '' + tindex + '' + eindex
                            "
                          >
                            {{ element.title }}
                          </a-tag>
                          <template v-if="element.type === 'partlayout'">
                            <a-tag
                              color="pink"
                              v-for="(eitem, eitemindex) in element.list"
                              @click="selectControl(eitem)"
                              :key="
                                index +
                                  '' +
                                  pindex +
                                  '' +
                                  tindex +
                                  '' +
                                  eindex +
                                  eitemindex
                              "
                            >
                              {{ eitem.title }}
                            </a-tag>
                          </template>
                        </template>
                      </el-collapse-item>
                    </template>
                  </el-collapse>
                </el-collapse-item>
              </template>
            </el-collapse>
          </el-collapse-item>
        </template>
        <template v-for="(item, index) in data.layerlist">
          <el-collapse-item
            :title="'弹出层【' + item.title + '】'"
            :name="'layer' + index"
            :key="item"
          >
            <el-collapse class="tabchild">
              <template v-for="(plane, pindex) in item.list">
                <el-collapse-item
                  :title="
                    '模块【' +
                      (plane.title === '' || plane.title === undefined
                        ? plane.name
                        : plane.title) +
                      '】'
                  "
                  v-if="plane && plane.type == 'gridPanel'"
                  :name="plane.key"
                  :key="index + '' + pindex + '' + tindex"
                >
                  <template v-for="(element, eindex) in plane.columns[0].list">
                    <a-tag
                      color="pink"
                      v-if="notcontroltype.indexOf(element.type) < 0"
                      @click="selectControl(element)"
                      :key="index + '' + pindex + '' + tindex + '' + eindex"
                    >
                      {{ element.title }}
                    </a-tag>
                    <template v-if="element.type === 'partlayout'">
                      <a-tag
                        color="pink"
                        v-for="(eitem, eitemindex) in element.list"
                        @click="selectControl(eitem)"
                        :key="
                          index +
                            '' +
                            pindex +
                            '' +
                            tindex +
                            '' +
                            eindex +
                            eitemindex
                        "
                      >
                        {{ eitem.title }}
                      </a-tag>
                    </template>
                  </template>
                </el-collapse-item>
                <el-collapse-item
                  v-else-if="plane && plane.type == 'tabs'"
                  :title="'模块【' + plane.name + '】'"
                  :key="index + '' + pindex"
                >
                  <el-collapse class="tabchild2">
                    <template v-for="(tab, tindex) in plane.options.panelist">
                      <el-collapse-item
                        :title="'子模块【' + tab.title + '】'"
                        :name="tab.key"
                        :key="index + '' + pindex + '' + tindex"
                      >
                        <template
                          v-for="(element, eindex) in tab.columns[0].list"
                        >
                          <a-tag
                            color="pink"
                            v-if="notcontroltype.indexOf(element.type) < 0"
                            @click="selectControl(element)"
                            :key="
                              index + '' + pindex + '' + tindex + '' + eindex
                            "
                          >
                            {{ element.title }}
                          </a-tag>
                          <template v-if="element.type === 'partlayout'">
                            <a-tag
                              color="pink"
                              v-for="(eitem, eitemindex) in element.list"
                              @click="selectControl(eitem)"
                              :key="
                                index +
                                  '' +
                                  pindex +
                                  '' +
                                  tindex +
                                  '' +
                                  eindex +
                                  eitemindex
                              "
                            >
                              {{ eitem.title }}
                            </a-tag>
                          </template>
                        </template>
                      </el-collapse-item>
                    </template>
                  </el-collapse>
                </el-collapse-item>
                <el-collapse-item
                  v-else
                  :key="pindex"
                  :title="'模块【' + plane.name + '】'"
                >
                  <el-collapse class="tabchild2">
                    <template v-for="(tab, tindex) in plane.options.panelist">
                      <el-collapse-item
                        :title="'子模块【' + tab.title + '】'"
                        :name="tab.key"
                        :key="index + '' + pindex + '' + tindex"
                      >
                        <template
                          v-for="(element, eindex) in tab.columns[0].list"
                        >
                          <a-tag
                            color="pink"
                            v-if="notcontroltype.indexOf(element.type) < 0"
                            @click="selectControl(element)"
                            :key="
                              index + '' + pindex + '' + tindex + '' + eindex
                            "
                          >
                            {{ element.title }}
                          </a-tag>
                          <template v-if="element.type === 'partlayout'">
                            <a-tag
                              color="pink"
                              v-for="(eitem, eitemindex) in element.list"
                              @click="selectControl(eitem)"
                              :key="
                                index +
                                  '' +
                                  pindex +
                                  '' +
                                  tindex +
                                  '' +
                                  eindex +
                                  eitemindex
                              "
                            >
                              {{ eitem.title }}
                            </a-tag>
                          </template>
                        </template>
                      </el-collapse-item>
                    </template>
                  </el-collapse>
                </el-collapse-item>
              </template>
            </el-collapse>
          </el-collapse-item>
        </template>
        <el-collapse-item
          key="other"
          title="其他常用变量"
          name="layoutitemother"
        >
          <a-tag color="pink" @click="selectother('page')">
            页码page
          </a-tag>
          <a-tag
            color="pink"
            @click="
              selectother('this.controlData.{controlId}.pagination.pagesize')
            "
          >
            pageSize
          </a-tag>
        </el-collapse-item>
      </el-collapse>
      <el-col :span="20" class="border-content" style="height:">
        <label _tmplitem="1" class="labeltitle " style="width:150px;">
          自定义变量：</label
        >
        <div _tmplitem="1" style="margin-left: 150px;margin-rigth: 150px;">
          <el-input
            placeholder="请输入自定义变量"
            v-model="customVariable"
            maxlength="50"
          ></el-input>
        </div> </el-col
      ><el-col :span="4">
        <el-button type="primary" @click="clickCustomVariable">确定</el-button>
      </el-col>
      <el-col :span="12" class="border-content" style="height:">
        <label _tmplitem="1" class="labeltitle " style="width:150px;">
          url变量</label
        >
        <div _tmplitem="1" style="margin-left: 150px;margin-rigth: 150px;">
          <el-input
            placeholder="请输入url变量"
            v-model="UrlVariable"
            maxlength="50"
          ></el-input>
        </div> </el-col
      ><el-col :span="8">
        <el-input
          placeholder="默认值"
          v-model="UrlDefaultVariable"
          maxlength="50"
        ></el-input
      ></el-col>
      <el-col :span="4">
        <el-button type="primary" @click="clickUrlVariable">确定</el-button>
      </el-col>
      <el-col :span="20" class="border-content" style="height:">
        <label _tmplitem="1" class="labeltitle " style="width:150px;">
          Data变量：</label
        >
        <div _tmplitem="1" style="margin-left: 150px;margin-rigth: 150px;">
          <el-input
            placeholder="请输入Data变量"
            v-model="dataVariable"
            maxlength="50"
          ></el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="clickDataVariable">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ['fromdata'],
  data() {
    return {
      notcontroltype: [
        'wmpDetail',
        'listview',
        'pageheader',
        'dynamiclayout',
        'partlayout',
        'blank',
        'htmlArea',
        'button'
      ],
      data: this.fromdata,
      customVariable: '',
      dataVariable: '',
      UrlVariable: '',
      UrlDefaultVariable: ''
    }
  },
  methods: {
    selectControl(element) {
      // console.log(element)
      this.$emit('selectconfirm', 'control', element)
    },
    clickCustomVariable() {
      if (this.customVariable === '') {
        this.$message.error('自定义变量不能为空！')
        return
      }
      this.$emit('selectconfirm', 'string', `◇${this.customVariable}`)
    },
    clickDataVariable() {
      if (this.dataVariable === '') {
        this.$message.error('Data变量不能为空！')
        return
      }
      this.$emit('selectconfirm', 'string', `◆${this.dataVariable}`)
    },
    clickUrlVariable() {
      if (this.UrlVariable === '') {
        this.$message.error('URL变量不能为空！')
        return
      }
      if (this.UrlDefaultVariable === '') {
        this.$message.error('URL变量默认值！')
        return
      }
      this.$emit(
        'selectconfirm',
        'string',
        `◆this.$query("${this.UrlVariable}")==undefined?"${this.UrlDefaultVariable}":this.$query("${this.UrlVariable}")`
      )
    },
    selectother(variable) {
      this.$emit('selectconfirm', 'string', `◆${variable}`)
    }
  }
}
</script>
<style scoped>
.tabchild {
  padding-left: 20px;
}
.tabchild2 {
  padding-left: 20px;
}
.el-collapse-item__content {
  padding-bottom: 5px;
}

.border-title {
  height: 42px;
  line-height: 42px;
  padding-left: 15px;
  border-top: none;
  border-right: none;
}

.border-content {
  border-top: none;
  border-right: none;
  height: 42px;
  padding: 4px 15px;
}

.border-mult .border-content {
  height: auto;
  border-bottom: none;
}

.border-mult {
  background-color: #f5f5f5;
}

.border-mult .border-title {
  height: auto;
  border-bottom: none;
  border-left: none;
  margin-left: -2px;
}
.labeltitle {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 30px;
  /* padding: 0 12px 0 0; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: normal;
}
</style>
